<template>
<view class="container">
	 <uni-nav-bar title="收货地址管理" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
    <view class="address-list" v-if="addressList.length > 0">
        <view v-for="(item, index) in addressList" :key="index" class="item" @tap.stop="selectAddress" :data-address-id="item.id">
            <view class="l">
                <view class="name">{{item.name}}</view>
                <view class="mobile">{{item.phoneNumber}}</view>
            </view>
            <view class="l">
                <view class="address">{{item.province+item.city+item.region+item.detailAddress}}</view>
            </view>
            <view class="l top"  :data-address-id="item.id">
                <image class="icon" src="/static/static/images/checked.png" v-if="item.defaultStatus==1"></image>
                <image class="icon" src="/static/static/images/check.png" v-if="item.defaultStatus==0"></image>
                <text class="default" :data-address-id="item.id">默认地址</text>
                <view class="edit" @tap.stop="addressAddOrUpdate" :data-address-id="item.id">
                    <image class="icon" src="/static/static/images/edit.png"></image>
                    <text class="txt">编辑</text>
                </view>
                <view class="delete" @tap.stop="deleteAddress" :data-address-id="item.id">
                    <image class="icon" src="/static/static/images/delete.png"></image>
                    <text class="txt">删除</text>
                </view>
            </view>
        </view>
    </view>
    <view class="empty-view" v-if="addressList.length <= 0">
      <image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noAddress-26d570cefa.png"></image>
      <text class="text">收货地址在哪里</text>
    </view>
    <view class="add-address" @tap="addressAddOrUpdate" data-address-id="0">新增收货地址</view>
</view>
</template>

<script>
// var util = require("../../../utils/util.js");
// var api = require("../../../config/api.js");
import util from '../../../utils/util.js';
import api from '../../../config/api.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';

var app = getApp();

export default {
  data() {
    return {
      addressList: []
    };
  },

  components: {uniNavBar},
  props: {},
  onShareAppMessage: function (res) {
    return {
      title: '琅琊严选',
      path: '/pages/index/index'
    };
  },
  onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {// 页面渲染完成
  },
  onShow: function () {
    // 页面显示
    this.getAddressList();
  },
  methods: {
	  goback: function(){
		  uni.navigateBack()
	  },
	  changedefault(e) {
      let defaultStatus = event.currentTarget.dataset.defaultStatus;
      let defaultId = event.currentTarget.dataset.defaultId;

      if (defaultStatus == 1) {
        uni.setStorageSync('defaultId', defaultId);
      }
    },

    getAddressList() {
      let that = this;
      util.request(api.AddressList).then(function (res) {
        if (res.errno == 0) {
          that.setData({
            addressList: res.data.records
          });
        }
      });
    },

    addressAddOrUpdate(event) {
      console.log(event);
      uni.navigateTo({
        url: '/pages/shopping/addressAdd/addressAdd?id=' + event.currentTarget.dataset.addressId
      });
    },

    selectAddress(event) {
      var that = this;
      const eventChannel = this.getOpenerEventChannel();
      uni.navigateBack({
        delta: 1,
        success: function (res) {
          eventChannel.emit('onSelected', event.currentTarget.dataset.addressId);
        }
      });
      console.log('event.currentTarget.dataset.addressId' + JSON.stringify(event.currentTarget.dataset.addressId)); // try {
      //   wx.setStorageSync('addressId', event.currentTarget.dataset.addressId);
      //   console.log(event.currentTarget.dataset.addressId)
      // } catch (e) {
      // }
      //选择该收货地址
      // wx.navigateBack({
      //   delta: 1,
      // })
    },

    deleteAddress(event) {
      console.log(JSON.stringify(event));
      let that = this;
      uni.showModal({
        title: '',
        content: '确定要删除地址？',
        success: function (res) {
          if (res.confirm) {
            let addressId = event.currentTarget.dataset.addressId;
            util.request(api.AddressDelete, {
              id: addressId
            }).then(function (res) {
              if (res.errno == 0) {
                that.getAddressList();
              }
            });
            console.log('用户点击确定');
          }
        }
      });
      return false;
    },

    defaultFun: function (e) {
      let that = this;
      util.request(api.AddressDefault, {
        id: e.currentTarget.dataset.addressId
      }).then(function (res) {
        if (res.errno == 0) {
          that.getAddressList();
        }
      });
    }
  }
};
</script>
<style>
page{
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.container{
  height: auto;
  width: 100%;
  background: #f4f4f4;
}

.address-list{
    padding: 0rpx 0rpx 0rpx 0rpx;
}

.address-list .item{
    height: auto;
    align-items: center;
    display: flex;
    margin: 20rpx 30rpx 0rpx 30rpx;
    border-radius: 15rpx;
    padding: 40rpx 0rpx 0rpx 20rpx;
    background: #fff;
    flex-direction: column;
}

.address-list .l{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.address-list .l.top{
    border-top: 1rpx solid #e5e4e5;
    padding: 24rpx 0;
}

.address-list .name{
    width: auto;
    height: auto;
    font-size: 28rpx;
    color: #353535;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.address-list .default{
    font-size: 24rpx;
    color: #888888;
    flex: 1;
    margin-left: 12rpx;
}
.address-list .edit{
    display: flex;
    flex-direction: row;
}
.address-list .delete{
    display: flex;
    flex-direction: row;
    margin-left: 40rpx;
    margin-right: 20rpx;
}
.address-list .icon{
    width: 30rpx;
    height: 30rpx;
}
.address-list .txt{
    color: #888888;
    font-size: 24rpx;
    margin-left: 12rpx;
}
.address-list .c{
    flex: 1;
    height: auto;
    overflow: hidden;
}

.address-list .mobile{

    height: auto;
    font-size: 28rpx;
    line-height: 29rpx;
    overflow: hidden;
    color: #353535;
    margin-left: 20rpx;
}

.address-list .address{
    height: auto;
    font-size: 24rpx;
    line-height: auto;
    overflow: hidden;
    color: #888888;
    margin-top: 16rpx;
    margin-bottom: 40rpx;
}

.address-list .r{
    width: 52rpx;
    height: auto;
    overflow: hidden;
    margin-right: 16.5rpx;
}

.address-list .del{
    display: block;
    width: 52rpx;
    height: 52rpx;
}

.add-address{
    background: #b28850;
    text-align: center;
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    position: fixed;
    border-radius: 40rpx;
    color: #fff;
    font-size: 29rpx;
    bottom: 40rpx;
    left: 30rpx;
}

.empty-view{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-view .icon{
  height: 248rpx;
  width: 258rpx;
  margin-bottom: 10rpx;
}

.empty-view .text{
  width: auto;
  font-size: 28rpx;
  line-height: 35rpx;
  color: #999;
}
</style>